<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head th:replace="layouts::header"></head>
<body>

<nav th:replace="layouts::navbar"></nav>

<div class="container">
    <h3>主面板</h3>
    <p th:text="${versionNumber}"></p>
    <div class="row">
        <div class="col-md-6">
        <h4>当前项目</h4>
        <table class="table table-header table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>项目名称</th>
                    <th>项目状态</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="aProject : ${projects}">
                    <td th:text="${aProject.name}"></td>
                    <td th:text="${aProject.stage}"></td>
                </tr>
            </tbody>
        </table>
    </div>
        <div class="col-md-4">
            <canvas id="myPieChart"  height="50"  width="50"></canvas>
            <script>
                let chartData = "[[${projectStatusData}]]"

            </script>

        </div>
    </div>


    <div>
        <h4>当前学生</h4>
        <div class="row">
            <div class="col-md-6">
        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
            <tr>
                <th>学生姓名</th>
                <th>微信号</th>
                <th>项目个数</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="aStudent : ${studentProjects}">
                <td th:text="${aStudent.name}"></td>
                <td th:text="${aStudent.wechatId}"></td>
                <td th:text="${aStudent.projectCount}"></td>
            </tr>
            </tbody>
        </table>

            </div>
        </div>

    </div>


<!--    <div class="col-md-4">-->
<!--        <canvas id="myPieChart"  height="50"  width="50"></canvas>-->
<!--    </div>-->


</div>

   <script type="text/javascript" th:src="@{js/myChart.js}"></script>

</body>
</html>